<template>
	<view class="auth-page flex-col">

		<text class="text_2">个人信息认证</text>
		<view class="paragraph_1">
			Hi~欢迎来到【遇见黄石】
		</view>
		<view class="paragraph_1">
			共青团黄石市委官方婚恋交友平台！
		</view>

		<text class="paragraph_2">
			为了守护这片交友的净土，我们坚持实名认证。这不仅是平台的要求，更是您安全、高效交友的基石。
		</text>
		<view class="paragraph_2" style="margin-top: 0;">
			*实名认证意味着：
		</view>
		<view class="paragraph_2" style="margin-top: 0;">
			更安全的环境、更真诚的相遇、更高效的匹配
		</view>
		<text class="text_3 fw600">我们郑重承诺：</text>
		<view class="image-text_13 flex-row">
			<view class="image-text_14 flex-row">
				<view class="image-text_15">
					<text class="paragraph_3">
						您的身份信息仅用于安全核验，我们将采用最严格的加密技术进行保护。
					</text>
					<text class="paragraph_3">不会公开您的敏感个人信息。</text>
					<text class="paragraph_3">不会将信息用于认证以外的任何目的。</text>
				</view>
			</view>
		</view>
		<view class="list_4 flex-col">
			<view class="list-items_1 flex-row justify-between" v-for="(item, index) in loopData0" :key="index">
				<view class="image-text_16 flex-row">
					<image class="label_4" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
					<view class="text-group_4 flex-col">
						<text class="text_4">{{ item.lanhutext0 }}</text>
						<!-- <text class="text_5">{{ item.lanhutext1 }}</text> -->
					</view>
				</view>
				<view class="text-wrapper_1 flex-col" :class="{ 'disabled': item.lanhutext2 === '未 开 通' }">
					<text class="text_6" @click="handleAuth(item)">{{ item.lanhutext2 }}</text>
				</view>
			</view>
		</view>
		<view class="text-wrapper_2 flex-col" @click="handleSkip">
			<text class="text_7">暂时跳过</text>
		</view>
	</view>
</template>
<script>
import { registerUser } from '@/common/api_meethuangshi.js'
export default {
	data() {
		return {
			loopData0: [
				{
					lanhuimage0:
						'https://hxs.dsjhs.com:553/prod-api/profile/sm.png',
					lanhutext0: '实名认证（必要）',
					lanhutext1: '黄石市公安人口数据库校验身份信息，户籍等。',
					lanhutext2: '去 认 证',
				},
				{
					lanhuimage0:
						'https://hxs.dsjhs.com:553/prod-api/profile/gz.png',
					lanhutext0: '工作认证（可选）',
					lanhutext1:
						'黄石市公积金数据校验公积金缴纳数据及单位，校验工作状态。',
					lanhutext2: '未 开 通',
				},

				{
					lanhuimage0:
						'https://hxs.dsjhs.com:553/prod-api/profile/hy.png',
					lanhutext0: '婚姻状态认证（可选）',
					lanhutext1:
						'黄石市民政局数据校验婚姻状态（已婚、未婚）',
					lanhutext2: '未 开 通',
				},
			],
			constants: {},
		};
	},
	methods: {
		handleAuth(item) {
			if (item.lanhutext0 === '实名认证（必要）') {
				uni.navigateTo({
					url: '/subpage/meethuangshi/acceptAuth'
				});
			} else {
        uni.showToast({
          title: '暂未开放',
          icon: 'none'
        })
      }
		},
		async handleSkip() {
			const res = await registerUser(uni.getStorageSync('personInfoData'))
			console.log(res, 'res')
			if (res.code === 200) {
				uni.navigateTo({
					url: '/subpage/meethuangshi/index?showSkip=true'
				});
			}
		},

	},
};
</script>
<style lang="scss" scoped>
@import '../../static/style/common.css';

.auth-page {
	background-color: rgba(247, 246, 255, 1);
	position: relative;
	width: 100%;
	min-height: 100vh;
	padding: 16px;
	box-sizing: border-box;

	.box_2 {
		margin: 0 27px 0 43px;

		.text_10 {
			overflow-wrap: break-word;
			color: rgba(0, 0, 0, 1);
			font-size: 17px;
			font-family: SFPro-Semibold;
			font-weight: 600;
			text-align: right;
			white-space: nowrap;
			line-height: 22px;
		}

		.thumbnail_7 {
			width: 19px;
			height: 12px;
			margin: 5px 0 5px 182px;
		}

		.thumbnail_8 {
			width: 17px;
			height: 12px;
			margin: 5px 0 5px 8px;
		}

		.image_7 {
			width: 27px;
			height: 13px;
			margin: 5px 0 4px 7px;
		}
	}

	.image_8 {
		width: 384px;
		height: 46px;
		margin-top: 6px;
	}

	.text_2 {
		margin-top: 16px;
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 18px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 25px;
	}

	.paragraph_1 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 16px;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		text-align: left;
		line-height: 22px;
	}

	.paragraph_2 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: normal;
		text-align: left;
		line-height: 20px;
		margin: 20px 0 0 0;
	}

	.text_3 {
		overflow-wrap: break-word;
		color: rgba(52, 49, 79, 1);
		font-size: 14px;
		font-weight: 600;
		text-align: left;
		white-space: nowrap;
		line-height: 20px;
		margin: 20px 0 0 0;
	}

	.image-text_13 {
		position: relative;
		margin: 6px 0 0 0;

		.image-text_14 {
			position: relative;

			.image-text_15 {
				width: 358px;

				.paragraph_3 {
					position: relative;
					display: block;
					color: rgba(52, 49, 79, 1);
					font-size: 14px;
					font-weight: normal;
					text-align: left;
					line-height: 20px;
					padding-left: 12px;

					&::before {
						position: absolute;
						top: 5px;
						left: 0;
						content: '';
						display: block;
						background-color: rgba(49, 158, 255, 1);
						border-radius: 50%;
						width: 6px;
						height: 6px;
					}
				}
			}

			.group_1 {
				background-color: rgba(49, 158, 255, 1);
				border-radius: 50%;
				position: absolute;
				left: 0;
				top: 6px;
				width: 6px;
				height: 6px;
			}
		}

		.group_2 {
			background-color: rgba(49, 158, 255, 1);
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 46px;
			width: 6px;
			height: 6px;
		}
	}

	.list_4 {
		margin-top: 32px;

		.list-items_1 {
			background-color: rgba(255, 255, 255, 1);
			border-radius: 20px;
			width: 100%;
			margin-bottom: 16px;
			padding: 19px 12px 19px 18px;

			.image-text_16 {
				// width: 282px;
				margin: 1px 0 1px 0;

				.label_4 {
					width: 32px;
					height: 32px;
					margin: 19px 0 19px 0;
				}

				.text-group_4 {
          margin-left: 12px;
          justify-content: center;
					.text_4 {
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 16px;
						font-family: PingFangSC-Semibold;
						font-weight: 600;
						text-align: left;
						white-space: nowrap;
						line-height: 22px;
					}

					.text_5 {
						width: 210px;
						height: 40px;
						overflow-wrap: break-word;
						color: rgba(52, 49, 79, 1);
						font-size: 14px;
						font-weight: normal;
						text-align: left;
						line-height: 20px;
						margin-top: 8px;
					}
				}
			}

			.text-wrapper_1 {
				background: url('https://hxs.dsjhs.com:553/prod-api/profile/qrz-bg.png') 100% no-repeat;
				background-size: 100% 100%;
				padding: 9px 8px 9px 9px;

        

				.text_6 {
					width: 13px;
					height: 54px;
					overflow-wrap: break-word;
					color: rgba(255, 255, 255, 1);
					font-size: 13px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					text-align: left;
					line-height: 18px;
				}

        &.disabled {
          background: none;
          background-color: rgba(233, 233, 233, 1);
          border-radius: 20px;
          .text_6 {
            color: #999;
          }
        }
			}
		}
	}

	.text-wrapper_2 {
		width: 174px;
		height: 48px;
		margin: 20px auto 0;
		background: rgba(52, 49, 79, 0.06);
		border-radius: 20px;
		text-align: center;


		.text_7 {
			overflow-wrap: break-word;
			color: rgba(52, 49, 79, 1);
			font-size: 16px;
			font-weight: 600;
			text-align: center;
			white-space: nowrap;
			line-height: 48px;

		}
	}
}
</style>